import React, { FC } from 'react';
import ProTable, { ProColumns, ActionType } from '@/components/ProTable';
import styles from './index.less';
import { Modal } from 'antd';
import { TableListItem } from '@/pages/Card/useCardModel';
import useCardModel from '@/pages/Card/useCardModel';
import { cardType } from '@/pages/Card/constants';
import ToolBar from './components/Toolbar';
import IconFont from '@/components/IconFont';
import useHoxModel from './useHoxModel';
import ConfirmProps from '@/components/CommonModal/Confirm';
export const modelName = 'normalCard';
const { confirm } = Modal;

//定义setTimeout返回类型

// type TimerHandle = ReturnType<typeof setTimeout>;

interface CardProps {
  activeTab: string;
  actionRef: React.MutableRefObject<ActionType | undefined>;
  lossActionRef: React.MutableRefObject<ActionType | undefined>;
}

const NormalCard: FC<CardProps> = ({ activeTab, actionRef, lossActionRef }) => {
  const { getCardList, lossCard } = useCardModel((model) => [model.getCardList]);
  const { selectedRowKeys, dispatch } = useHoxModel((model) => [model.selectedRowKeys]);

  const columns: ProColumns<TableListItem>[] = [
    {
      title: '序号',
      dataIndex: 'index',
      align: 'center',
      valueType: 'index',
      width: '10%',
    },
    {
      title: '卡号',
      dataIndex: 'cardNo',
      align: 'center',
    },
    {
      title: '生效时间',
      align: 'center',
      dataIndex: 'activeTime',
      valueType: 'dateTime',
    },
    {
      title: '截止时间',
      align: 'center',
      dataIndex: 'validPeriod',
      valueType: 'dateTime',
    },
    {
      title: '使用者',
      align: 'center',
      dataIndex: 'userName',
    },
    {
      title: '剩余时间',
      align: 'center',
      dataIndex: 'timeRemaining',
    },
    {
      title: '操作',
      key: 'option',
      width: '10%',
      valueType: 'option',
      render: (_, record, index) => [
        <a
          key={'loss'}
          className={styles['open-card']}
          onClick={() => {
            confirm({
              ...new ConfirmProps('是否挂失选中的所有记录?', '挂失后可恢复记录'),
              async onOk() {
                const res = await lossCard({ ids: [record.id] });
                if (res?.result === 0) {
                  actionRef.current?.reloadAndRest();
                }
              },
            });
          }}
        >
          <IconFont type={'iconguashi'} />
          <span>挂失</span>
        </a>,
      ],
    },
  ];

  return (
    <>
      <ProTable<TableListItem>
        columns={columns}
        request={async (params: { [key: string]: any }) => {
          const data = await getCardList({
            keyword: params.keyword || undefined,
            number: params.pageSize,
            page: params.current,
            status: cardType[activeTab],
          });
          return await {
            data: data?.list || [],
            success: true,
            total: data?.count || 0,
          };
        }}
        rowKey="id"
        rowSelection={{
          selectedRowKeys,
          onChange: (selectedRowKeys) => {
            dispatch({ selectedRowKeys });
          },
        }}
        tableAlertRender={false}
        actionRef={actionRef}
        dateFormatter="string"
        headerTitle={false}
        search={false}
        options={{
          search: {
            name: 'keyword',
          },
        }}
        toolBarRender={() => [<ToolBar actionRef={actionRef} lossActionRef={lossActionRef} />]}
      />
    </>
  );
};
export default NormalCard;
